<template>
	<view class="report_details">
		<view class="details_head">
			<image class="head_img" :src="'https://community.chuangxiangdianli.com/images/propertyImg/baoxiu_tu1.png'" mode=""></image>
			<view class="head_info">
				<text class="he_in_tit">{{repairDetails.type_text}}</text>
				<view class="he_in_foo"> 
					<text>报修状态: {{repairDetails.status_text}}</text>
					<text>报修时间: {{repairDetails.created_at}}</text>
					<text>报修地址: {{roomInfo}}</text> 
				</view>
			</view>
		</view>
		<view class="details_con">
			<text class="des_top">联系方式</text>
			<view class="des_foo">
				<text>{{repairDetails.name}}</text>
				<text>{{repairDetails.mobile}}</text>
			</view>
		</view>
		<view class="details_des">
			 <text class="des_tit">情况描述</text>
			 <view class="des_con">
				{{repairDetails.content}}
			 </view>  
			 <view class="des_imgs"> 
				<image 
					v-for="v in repairDetails.img"
					class="img_item" 
					:src="v" 
					mode=""  
				></image> 
			 </view>
		</view>
		<view class="details_btn">
			<text @click="cancelWarr">取消报修</text>
		</view>
	</view>
</template>

<script>
	import { getStorages } from  '@/utils/storage'
	export default {
		data() {
			return {
				repairId: null,
				// 报修详情
				repairDetails:{},
				// 住户
				roomInfo: '',
				// 取消成功 跳转上一页
				prePageTime: null
			};
		},
		onLoad(option) {
			option.id ? this.repairId = option.id : null
		},
		onShow() {
			if(getStorages('userInfo')){ 
				this.roomInfo = getStorages('userInfo').userInfo.roomInfo 
			}
			this.getRepairsDetails()
		},
		onUnload() { 
			clearTimeout(this.prePageTime)
		},
		methods:{
			// 报修详情
			getRepairsDetails(){
				this.$mrequest2({
					url: 'Mini/Estate/repairs/' + this.repairId,
					method: 'GET' 
				}).then(res => { 
					if(res.code == 200){
						this.repairDetails = res.data
					}
				})
			},
			// 取消保修
			cancelWarr(){ 
				this.$mrequest2({
					url: 'Mini/Estate/repairs/' + this.repairId,
					method: 'PUT', 
				}).then(res => { 
					if(res.code == 200){
						uni.showToast({
							title: '取消成功',
							icon: 'none'
						})
						clearTimeout(this.prePageTime)
						this.prePageTime = setTimeout(() =>  {
							uni.navigateBack()
						},1000)
					}
				})
			} 
		}
	}
</script>


<style lang="scss">
.report_details{
	height: 100vh;
	background-color: #f7f8f9;
	.details_head{ 
		display: flex;
		padding: 30rpx;
		min-height: 346rpx;
		background-color: #fff;
		.head_img{
			margin-right: 20rpx;
			width: 46rpx;
			height: 46rpx;
		}
		.head_info{
			flex: 1; 
			.he_in_tit{ 
				font-size: 34rpx;
				color-rendering: #333;
				font-weight: 700;
			}
			.he_in_foo{
				margin-top: 10rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				line-height: 50rpx;
				font-size: 28rpx;
				color: #727272;
			}
		}
	}
	.details_con{
		padding: 30rpx;
		margin: 17rpx 0; 
		font-size: 34rpx;
		font-weight: 700;
		background-color: #fff; 
		.des_foo{
			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;
		}
	}
	.details_des{ 
		padding: 30rpx; 
		background-color: #fff;
		.des_tit{
			font-size: 34rpx;
			font-weight: 700;
			color: #333;
		}
		.des_con{
			margin: 36rpx 0;
			font-size: 26rpx;
			color: #545454;
		}
		.des_imgs{
			display: flex;
			flex-wrap: wrap;
			.img_item{ 
				margin: 0 10rpx 10rpx 0;
				width: 200rpx;
				height: 180rpx;
				border-radius: 10rpx;
			}
		}
	}
	.details_btn{
		margin: 30rpx auto;
		width: 354rpx;
		height: 92rpx;
		line-height: 92rpx;
		text-align: center;
		font-size: 36rpx;
		color: #fff;
		background: #B4B4B4;
		border-radius: 10rpx;
	}
}
</style>
